<template>
	<view>
		<view class="bg-white margin-bottom-sm">
			<view class="flex justify-between align-center padding-top padding-lr">
				<view class="title margin-right-sm">选择用户</view>
				<u-input v-model="value" type="select" border="true" @click="isShowUser = true" placeholder="请选择" />
			</view>
			<view class="flex justify-between align-center padding-top padding-lr">
				<view class="title margin-right-sm">选择类型</view>
				<u-input v-model="form.type" type="select" border="true" @click="isShowType = true" placeholder="请选择" />
			</view>
			<view class="flex justify-between align-center padding-top padding-lr">
				<view class="title margin-right-sm">订单金额</view>
				<u-input v-model="value" type="number" border="true"
					:custom-style="{borderRadius:'20rpx',width:'344rpx'}" placeholder="请输入" />
			</view>
			<view class="flex justify-between align-center padding-top padding-lr">
				<view class="title margin-right-sm">时效(分钟数)</view>
				<u-input v-model="value" type="number" border="true"
					:custom-style="{borderRadius:'20rpx',width:'344rpx'}" placeholder="请输入" />
			</view>
			<view class="btn flex justify-around align-center padding-tb text-lg">
				<view class="btn-cler text-center radius-200 text-999" @click="handleEmpty">取消</view>
				<view class="btn-query text-center radius-200 text-white" @click="handleQuery">查询</view>
			</view>
		</view>
		<mescroll-body @up="upCallback" :up="upOptionNoAuto" :down="downOption" @init="mescrollInit"
			@down="downCallback">
			<view class="table-box">
				<view class="table-con">
					<u-table>
						<u-tr class="u-tr">
							<u-th class="u-th">订单编号</u-th><!-- 1 -->
							<u-th class="u-th">用户</u-th><!-- 2 -->
							<u-th class="u-th">客服</u-th><!-- 3 -->
							<u-th class="u-th">律师</u-th><!-- 4 -->
							<u-th class="u-th">标题</u-th><!-- 5 -->
							<u-th class="u-th">时长(分钟数)</u-th><!-- 6 -->
							<u-th class="u-th">订单金额</u-th><!-- 7 -->
							<u-th class="u-th">订单状态</u-th><!-- 8 -->
							<u-th class="u-th">转接状态</u-th><!-- 9 -->
							<u-th class="u-th">支付链接</u-th><!-- 10 -->
							<u-th class="u-th">创建时间</u-th><!-- 11 -->
							<u-th class="u-th">支付时间</u-th><!-- 13 -->
							<u-th class="u-th">转接时间</u-th><!-- 14 -->
						</u-tr>
						<u-tr class="u-tr" v-for="(item,index) in dataList" :key="index">
							<u-td class="u-td">{{item.room.room_no}}</u-td><!-- 1 -->
							<u-td class="u-td">{{item.last_time_electricity_num}}</u-td><!-- 2 -->
							<u-td class="u-td">{{item.this_time_electricity_num}}</u-td><!-- 3 -->
							<u-td class="u-td">{{item.electricity_price}}</u-td><!-- 4 -->
							<u-td class="u-td">{{item.electricity_num}}</u-td><!-- 5 -->
							<u-td class="u-td">{{item.electricity_amount}}</u-td><!-- 6 -->
							<u-td class="u-td">{{item.last_time_cold_water_num}}</u-td><!-- 7 -->
							<u-td class="u-td">{{item.this_time_cold_water_num}}</u-td><!-- 8 -->
							<u-td class="u-td">{{item.cold_water_price}}</u-td><!-- 9 -->
							<u-td class="u-td">{{item.cold_water_amount}}</u-td><!-- 10 -->
							<u-td class="u-td">{{item.last_time_hot_water_num}}</u-td><!-- 11 -->
							<u-td class="u-td">{{item.this_time_hot_water_num}}</u-td><!-- 12 -->
							<u-td class="u-td">{{item.hot_water_price}}</u-td><!-- 13 -->
							<u-td class="u-td">{{item.hot_water_amount}}</u-td><!-- 14 -->
						</u-tr>
					</u-table>
				</view>
			</view>
		</mescroll-body>
		<!-- 选择用户 -->
		<u-picker mode="selector" :range="actionStatusList" v-model="isShowUser" :default-selector="[0]"
			range-key="cateName"></u-picker>
		<!-- 类型 -->
		<u-picker mode="selector" :range="actionTypeList" v-model="isShowType" :default-selector="[0]" range-key="name"
			@confirm="handleType"></u-picker>
	</view>
</template>

<script>
	import {
		upOptionNoAuto,
		downOption,
	} from "@/utils/common.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				isShowService: false,
				isShowStatus: false,
				isShowType: false,
				upOptionNoAuto,
				downOption,
				form: {},
				dataList: [],
				actionTypeList: []
			}
		},
		onLoad() {
			this.initTypeData();
		},
		onShow() {
			this.$nextTick(function() {
				this.mescroll.resetUpScroll();
			});
		},
		methods: {
			// upCallback(page) {
			// 	let parm = {
			// 		page: page.num,
			// 		page_size: page.size,
			// 	}
			// 	this.$u.api._house_index(parm).then(res => {
			// 		let total = res.data.data.total;
			// 		let curPageLen = res.data.data.length;
			// 		if (page.num == 1) this.dataList = [];
			// 		this.dataList = this.dataList.concat(res.data.data);
			// 		this.mescroll.endByPage(curPageLen, total);
			// 	})
			// },
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			},
			// 类型
			initTypeData() {
				this.$u.api._getmdss().then(res => {
					this.actionTypeList = res.data;
				})
			},
			handleType(e) {
				this.form.type = this.actionTypeList[e].name;
			},
			// 用户
			initUserData() {
				this.$u.api._house_index(parm).then(res => {
					console.log(res);
				})
			},
			handleEmpty() {},
			handleQuery() {},
		},
	}
</script>
<style scoped lang="scss">
	._input {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.btn-cler {
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: 2rpx solid #999;
	}

	.btn-query {
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #2979ff;
	}

	.table-box {
		.u-th {
			background: #EEF6FF;
			height: 80rpx;
		}

		margin-top: 70rpx;
		overflow-x: auto;

		.table-con {
			width: 2400rpx;
		}
	}

	.u-td {
		height: 80rpx;
	}

	/deep/ .u-action-sheet-item {
		padding: 20rpx 0 !important;
	}
</style>